<template>
  <div class="login-container">
    <div class="animated-background">
      <div class="gradient-blob"></div>
      <div class="gradient-blob"></div>
      <div class="gradient-blob"></div>
      <div class="gradient-blob"></div>
    </div>
    
    <div class="glass-overlay"></div>
    
    <div class="login-card">
      <div class="logo-area">
        <svg class="logo" width="80" height="80" viewBox="0 0 64 64" @mousemove="handleGlobalMouseMove">
          <defs>
            <linearGradient id="faceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" style="stop-color:rgba(64, 158, 255, 0.95)"/>
              <stop offset="100%" style="stop-color:rgba(100, 197, 255, 0.95)"/>
            </linearGradient>
            <radialGradient id="pulse" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="white" stop-opacity="0.15">
                <animate attributeName="stop-opacity"
                  values="0.15;0.3;0.15" dur="2s"
                  repeatCount="indefinite"/>
              </stop>
              <stop offset="100%" stop-color="white" stop-opacity="0"/>
            </radialGradient>
            <radialGradient id="eyeShine" cx="30%" cy="30%" r="50%">
              <stop offset="0%" stop-color="white" stop-opacity="0.8"/>
              <stop offset="100%" stop-color="white" stop-opacity="0"/>
            </radialGradient>
          </defs>
          <g class="head" :transform="`rotate(${headRotation}, 32, 32)`">
            <circle cx="32" cy="32" r="30" fill="url(#faceGrad)"/>
            <circle cx="32" cy="32" r="28" fill="url(#pulse)" class="pulse"/>
            <g class="face">
              <g class="eye left" :transform="`translate(${leftEyeX}, ${leftEyeY})`">
                <circle cx="20" cy="25" r="6" fill="white"/>
                <circle cx="20" cy="25" r="3" fill="#333" class="pupil"/>
                <circle cx="19" cy="24" r="1.5" fill="url(#eyeShine)"/>
              </g>
              <g class="eye right" :transform="`translate(${rightEyeX}, ${rightEyeY})`">
                <circle cx="44" cy="25" r="6" fill="white"/>
                <circle cx="44" cy="25" r="3" fill="#333" class="pupil"/>
                <circle cx="43" cy="24" r="1.5" fill="url(#eyeShine)"/>
              </g>
              <path
                d="M24 44Q32 48 40 44"
                stroke="rgba(255, 255, 255, 0.95)"
                stroke-width="2.5"
                fill="none"
                stroke-linecap="round"
                class="mouth"
              />
            </g>
          </g>
        </svg>
        <h2>后台管理系统</h2>
      </div>

      <div class="login-form">
        
        
        <el-form 
          ref="formRef"
          :model="loginForm"
          :rules="rules"
          size="large"
        >
          <el-form-item prop="phone">
            <el-input 
              v-model="loginForm.phone"
              placeholder="手机号"
              :prefix-icon="Iphone"
            />
          </el-form-item>

          <el-form-item prop="code">
            <div class="code-input">
              <el-input 
                v-model="loginForm.code"
                placeholder="验证码"
                :prefix-icon="Lock"
              />
              <el-button 
                :class="['code-btn', { 'is-counting': isCountdown }]"
                :disabled="isCountdown || !loginForm.phone"
                @click="handleSendCode"
              >
                <span class="btn-text">{{ countdownText }}</span>
                <span v-if="isCountdown" class="btn-progress">
                  <svg class="progress-ring" width="20" height="20">
                    <circle
                      class="progress-ring__circle"
                      :style="{ 'stroke-dashoffset': progressOffset }"
                      stroke="currentColor"
                      stroke-width="2"
                      fill="transparent"
                      r="8"
                      cx="10"
                      cy="10"
                    />
                  </svg>
                </span>
              </el-button>
            </div>
          </el-form-item>

          <el-form-item 
            class="agreement-row" 
            prop="agreement"
            :class="{ 'shake-animation': showShake }"
          >
            <el-checkbox v-model="loginForm.agreement">
              <div class="agreement-text">
                <span class="text">我已阅读并同意</span>
                <el-button link class="link-btn" @click="openUserAgreement">用户协议</el-button>
                <span class="text">和</span>
                <el-button link class="link-btn" @click="openPrivacyPolicy">隐私政策</el-button>
              </div>
            </el-checkbox>
          </el-form-item>

          <el-button 
            type="primary" 
            class="submit-btn"
            :loading="isLoading"
            @click="handleSubmit"
          >
            {{ isLoading ? '登录中...' : '登录' }}
          </el-button>
        </el-form>

        <div class="other-login">
          <div class="divider">
            <span>其他登录方式</span>
          </div>
          <div class="social-buttons">
            <el-tooltip content="微信登录" placement="top">
              <el-button 
                circle 
                class="social-btn wechat"
                @click="handleThirdPartyLogin('wechat')"
              >
                <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
                  <path d="M692.3 347.2c11.2 0 22.3.8 33.3 2.1-30-140.2-179.1-244.3-349.3-244.3C169.8 105 0 248.4 0 427.7c0 103.4 56.3 188.3 150.5 254.2l-37.6 113.2L235.4 749c47.2 9.3 85.1 18.8 132.3 18.8 11.9 0 23.6-.6 35.2-1.5-7.4-25.4-11.7-52-11.7-79.7-.1-166 142.5-300.6 318.2-339.4zM497.7 249.1c28.5 0 47.3 18.7 47.3 47.2 0 28.2-18.8 47.4-47.3 47.4-28.2 0-56.7-19.2-56.7-47.4 0-28.5 28.5-47.2 56.7-47.2zm-262 94.6c-28.2 0-56.9-19.2-56.9-47.4 0-28.5 28.7-47.2 56.9-47.2 28.3 0 47.2 18.7 47.2 47.2 0 28.2-18.9 47.4-47.2 47.4z" fill="#fff"/>
                  <path d="M1024 657.7c0-150.9-150.5-274.2-319.8-274.2-179.1 0-319.9 123.3-319.9 274.2 0 151.1 140.7 274.2 319.9 274.2 37.4 0 75.2-9.4 112.8-18.8l103.2 56.7-28.3-94.4c75.4-56.7 131.9-132.3 131.9-217.7zm-423.5-47.2c-18.8 0-37.8-18.7-37.8-37.9 0-18.8 19-37.7 37.8-37.7 28.5 0 47.3 18.9 47.3 37.7 0 19.2-18.8 37.9-47.3 37.9zm207.4 0c-18.7 0-37.5-18.7-37.5-37.9 0-18.8 18.8-37.7 37.5-37.7 28.3 0 47.2 18.9 47.2 37.7 0 19.2-18.9 37.9-47.2 37.9z" fill="#fff"/>
                </svg>
              </el-button>
            </el-tooltip>
            <el-tooltip content="QQ登录" placement="top">
              <el-button 
                circle 
                class="social-btn qq"
                @click="handleThirdPartyLogin('qq')"
              >
                <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
                  <path d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z" fill="#fff"/>
                  <path d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z" fill="#fff"/>
                  <path d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z" fill="#fff"/>
                  <path d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017" fill="#fff"/>
                </svg>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>

      <div class="footer">
        <p>© 2024 Your Company. All rights reserved.</p>
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="50%"
      class="agreement-dialog"
    >
      <div class="agreement-content" v-html="dialogContent"></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleAgree">
            同意
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElNotification } from 'element-plus'
import { 
  Iphone, 
  Lock
} from '@element-plus/icons-vue'
import type { LoginForm } from '../types/login'

const formRef = ref<FormInstance>()
const isCountdown = ref(false)
const countdown = ref(60)
const countdownText = computed(() => {
  if (!isCountdown.value) {
    return '获取验证码'
  }
  return `${countdown.value}s`
})
const rememberMe = ref(false)
const isLoading = ref(false)
const qrLoading = ref(true)
const showNotification = ref(false)
const notificationMessage = ref('')
const notificationType = ref('success')

// 扩展 LoginForm 类型
interface LoginForm {
  phone: string
  code: string
  loginType: 'phone' | 'wechat' | 'qq'
  agreement: boolean
}

const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogContent = ref('')

const loginForm = reactive<LoginForm>({
  phone: '',
  code: '',
  loginType: 'phone',
  agreement: false
})

// 更新表单验证规则
const rules = {
  phone: [
    { required: true, message: '请输入手号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
  ],
  agreement: [
    { 
      validator: (rule: any, value: boolean, callback: Function) => {
        if (!value) {
          callback(new Error('请阅读并同意用户协议和隐私政策'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

// 模拟二维码加载
setTimeout(() => {
  qrLoading.value = false
}, 1500)

const refreshQrCode = () => {
  qrLoading.value = true
  setTimeout(() => {
    qrLoading.value = false
    ElMessage.success('二维码已刷新')
  }, 1000)
}

const progressOffset = computed(() => {
  const circumference = 2 * Math.PI * 8 // 圆的周长
  const progress = (countdown.value / 60) // 进度比例
  return circumference * (1 - progress)
})

const handleSendCode = async () => {
  if (!loginForm.phone) {
    ElMessage.warning('请先输入手机号')
    return
  }
  
  if (!/^1[3-9]\d{9}$/.test(loginForm.phone)) {
    ElMessage.error('请输入正确的手机号')
    return
  }

  try {
    isCountdown.value = true
    
    // 模拟发送验证码
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage({
      message: '验证码已发送至您的手机',
      type: 'success',
      duration: 2000
    })
    
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
        isCountdown.value = false
        countdown.value = 60
      }
    }, 1000)
  } catch (error) {
    isCountdown.value = false
    ElMessage.error('验证码发送失败，请重试')
  }
}

const showShake = ref(false)

// 修改提交处理函数
const handleSubmit = async () => {
  if (!formRef.value) return
  
  if (!loginForm.agreement) {
    showShake.value = true
    ElMessage({
      message: '请阅读并同意用户协议和隐私政策',
      type: 'warning',
      duration: 2000
    })
    // 300ms 后移除抖动动画类，以便下次可以再次触发
    setTimeout(() => {
      showShake.value = false
    }, 300)
    return
  }
  
  try {
    isLoading.value = true
    await formRef.value.validate()
    
    // 模拟登录延迟
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    ElNotification({
      title: '登录成功',
      message: '欢迎回来',
      type: 'success'
    })
  } catch (error) {
    console.error(error)
  } finally {
    isLoading.value = false
  }
}

// 打开用户协议
const openUserAgreement = () => {
  dialogTitle.value = '用户协议'
  dialogContent.value = `
    <h3>用户协议</h3>
    <p>欢迎使用我们的服务！</p>
    <p>请仔细阅读以下条款，这些条款会影响您的权利和义务。</p>
    <!-- 这里添加更多协议内容 -->
  `
  dialogVisible.value = true
}

// 打开隐私政策
const openPrivacyPolicy = () => {
  dialogTitle.value = '隐私政策'
  dialogContent.value = `
    <h3>隐私政策</h3>
    <p>我们非常重视您的隐私保护。</p>
    <p>本隐私政策说明了我们如何收集、使用和保护您的个人信息。</p>
    <!-- 这里添加更多隐私政策内容 -->
  `
  dialogVisible.value = true
}

// 处理同意按钮点击
const handleAgree = () => {
  loginForm.agreement = true
  dialogVisible.value = false
}

// 添加第三方登录处理函数
const handleThirdPartyLogin = (type: 'wechat' | 'qq') => {
  if (!loginForm.agreement) {
    showShake.value = true
    ElMessage({
      message: '请阅读并同意用户协议和隐私政策',
      type: 'warning',
      duration: 2000
    })
    // 300ms 后移除抖动动画类，以便下次可以再次触发
    setTimeout(() => {
      showShake.value = false
    }, 300)
    return
  }
  
  // 根据类型处理不同的登录逻辑
  if (type === 'wechat') {
    ElMessage({
      message: '正在跳转到微信登录...',
      type: 'info'
    })
    // TODO: 处理微信登录
  } else {
    ElMessage({
      message: '正在跳转到QQ登录...',
      type: 'info'
    })
    // TODO: 处理QQ登录
  }
}

// 处理忘记密码
const handleForgotPassword = () => {
  ElMessage({
    message: '即将跳转到找回密码页面...',
    type: 'info'
  })
  // TODO: 跳转到找回密码页面
}

// 眼睛移动相关
const leftEyeX = ref(0)
const leftEyeY = ref(0)
const rightEyeX = ref(0)
const rightEyeY = ref(0)

// 添加头部旋转状态
const headRotation = ref(0)

// 添加全局鼠标移动监听
onMounted(() => {
  window.addEventListener('mousemove', handleGlobalMouseMove)
})

// 清理函数
let animationFrame: number
onBeforeUnmount(() => {
  window.removeEventListener('mousemove', handleGlobalMouseMove)
  cancelAnimationFrame(animationFrame)
})

const handleGlobalMouseMove = (event: MouseEvent) => {
  const logo = document.querySelector('.logo') as SVGElement
  if (!logo) return
  
  const rect = logo.getBoundingClientRect()
  const logoCenterX = rect.left + rect.width / 2
  const logoCenterY = rect.top + rect.height / 2
  
  // 计算鼠标相对于 logo 中心的位置
  const deltaX = event.clientX - logoCenterX
  const deltaY = event.clientY - logoCenterY
  
  // 计算距离
  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
  
  // 如果距离太小，避免除以零
  if (distance < 1) return
  
  // 增加移动幅度
  const maxMove = 4 // 增大最大移动距离
  
  // 使用更激进的缩放函数
  const moveScale = Math.pow(Math.E, -distance / 800)
  
  // 计算移动距离，增加非线性效果
  const moveX = (deltaX / distance) * maxMove * moveScale * (1 + Math.abs(deltaX) / 1000)
  const moveY = (deltaY / distance) * maxMove * moveScale * (1 + Math.abs(deltaY) / 1000)
  
  // 平滑过渡，减小插值系数使动画更快
  const smoothMove = () => {
    leftEyeX.value += (moveX - leftEyeX.value) * 0.5
    leftEyeY.value += (moveY - leftEyeY.value) * 0.5
    rightEyeX.value += (moveX - rightEyeX.value) * 0.5
    rightEyeY.value += (moveY - rightEyeY.value) * 0.5
    
    requestAnimationFrame(smoothMove)
  }
  
  requestAnimationFrame(smoothMove)
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f0f4f8;
}

.animated-background {
  position: fixed;
  inset: -50%;
  filter: blur(100px);
  opacity: 0.9;
  
  .gradient-blob {
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    mix-blend-mode: screen;
    animation: float 18s infinite;
    background: radial-gradient(circle at center, rgba(var(--color), 1) 0%, rgba(var(--color), 0) 70%);
    
    &:nth-child(1) {
      --color: 64, 158, 255;
      top: -40%;
      left: -30%;
      animation-delay: -2s;
      animation-duration: 18s;
    }
    
    &:nth-child(2) {
      --color: 100, 197, 255;
      top: 30%;
      right: -40%;
      animation-delay: -4s;
      animation-duration: 16s;
    }
    
    &:nth-child(3) {
      --color: 83, 168, 255;
      bottom: -40%;
      left: 30%;
      animation-delay: -6s;
      animation-duration: 14s;
    }
    
    &:nth-child(4) {
      --color: 120, 187, 255;
      bottom: 20%;
      right: 20%;
      animation-delay: -8s;
      animation-duration: 20s;
    }
  }
}

.glass-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(3px);
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(40%, -40%) scale(1.4) rotate(120deg);
  }
  50% {
    transform: translate(-30%, -50%) scale(0.8) rotate(240deg);
  }
  75% {
    transform: translate(-40%, -30%) scale(1.3) rotate(360deg);
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(480deg);
  }
}

.login-card {
  position: relative;
  z-index: 1;
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 
    0 4px 24px -1px rgba(0, 0, 0, 0.08),
    0 2px 8px -1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 8px 32px -2px rgba(0, 0, 0, 0.1),
      0 4px 16px -2px rgba(0, 0, 0, 0.06),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
  }
  
  .logo-area {
    text-align: center;
    margin-bottom: 40px;
    
    .logo {
      width: 80px;
      height: 80px;
      margin-bottom: 20px;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      animation: logoFloat 6s ease-in-out infinite;
      cursor: pointer;
      
      &:hover {
        transform: scale(1.1);
        
        .mouth {
          transform: scaleY(1.2) translateY(-1px);
        }
        
        .pupil {
          transform: scale(1.2);
        }
      }
      
      .head {
        transform-origin: center;
        will-change: transform;
      }
      
      .face {
        transform-origin: center;
        will-change: transform;
      }
      
      .eye {
        transform-origin: center;
        will-change: transform;
        
        .pupil {
          transform-origin: center;
          will-change: transform;
          transition: transform 0.1s ease-out; // 加快过渡速度
        }
      }
      
      .mouth {
        transition: all 0.3s ease;
        transform-origin: center center;
      }
      
      .pupil {
        transition: all 0.3s ease;
        transform-origin: center;
      }
      
      .pulse {
        transform-origin: center center;
        animation: pulse 2s ease-in-out infinite;
      }
    }
    
    h2 {
      color: rgba(44, 62, 80, 0.9);
      font-weight: 500;
      letter-spacing: 0.5px;
    }
  }
  
  .login-form {
    h3 {
      color: rgba(52, 73, 94, 0.9);
      font-weight: 400;
    }
    
    .code-input {
      display: flex;
      gap: 12px;
      
      .el-input {
        flex: 1;
      }
      
      .code-btn {
        position: relative;
        width: 120px;
        height: 44px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #fff;
        background: rgba(var(--el-color-primary-rgb), 0.85) !important;
        border: none !important;
        backdrop-filter: blur(4px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        letter-spacing: 0.5px;
        
        &:hover:not(:disabled) {
          background: rgba(var(--el-color-primary-rgb), 0.95) !important;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.3);
        }
        
        &:disabled {
          opacity: 0.7;
          cursor: not-allowed;
          background: rgba(var(--el-color-info-rgb), 0.5) !important;
          color: rgba(255, 255, 255, 0.9);
          
          &:hover {
            transform: none;
            box-shadow: none;
          }
        }
        
        &.is-counting {
          background: rgba(var(--el-color-info-rgb), 0.15) !important;
          color: var(--el-color-primary);
          border: 1px solid rgba(var(--el-color-primary-rgb), 0.2) !important;
          font-weight: 600;
          
          .btn-text {
            font-size: 15px;
          }
          
          .btn-progress {
            position: absolute;
            right: 8px;
            
            .progress-ring {
              transform: rotate(-90deg);
              
              &__circle {
                transition: stroke-dashoffset 0.3s;
                stroke-dasharray: 50.26548245743669;
                stroke: var(--el-color-primary);
              }
            }
          }
          
          &:hover {
            background: rgba(var(--el-color-info-rgb), 0.2) !important;
            transform: none;
            box-shadow: none;
          }
        }
      }
    }
    
    :deep(.el-input__wrapper) {
      background: rgba(255, 255, 255, 0.2);
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: blur(4px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0 16px;
      height: 44px;
      
      &:hover {
        background: rgba(255, 255, 255, 0.25);
      }
      
      &.is-focus {
        background: rgba(255, 255, 255, 0.3);
        border-bottom: 2px solid rgba(var(--el-color-primary-rgb), 0.6) !important;
      }
      
      .el-input__inner {
        color: rgba(0, 0, 0, 0.8);
        height: 44px;
        line-height: 44px;
        
        &::placeholder {
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
    
    :deep(.el-input__prefix) {
      color: rgba(0, 0, 0, 0.4);
    }
    
    .options-row {
      margin-bottom: 24px;
      
      :deep(.el-form-item__content) {
        margin: 0 !important;
      }
      
      .remember-forget {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        
        :deep(.el-checkbox) {
          height: auto;
          margin-right: 0;
          
          .el-checkbox__label {
            color: var(--el-text-color-regular);
            font-size: 13px;
          }
        }
        
        .action-links {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .el-divider {
            margin: 0;
            height: 12px;
            border-color: #e0e0e0;
          }
          
          .action-btn {
            padding: 0;
            height: auto;
            font-size: 13px;
            color: var(--el-text-color-regular);
            font-weight: normal;
            
            &:hover {
              color: var(--el-color-primary);
            }
            
            &.register {
              color: var(--el-color-primary);
              
              &:hover {
                color: var(--el-color-primary-light-3);
              }
            }
          }
        }
      }
    }
    
    .agreement-row {
      margin-bottom: 16px;
      
      :deep(.el-checkbox) {
        height: auto;
        margin-right: 0;
        display: flex;
        align-items: center;
        
        .el-checkbox__input {
          margin-top: 0;
          transition: all 0.3s;
          
          .el-checkbox__inner {
            transition: all 0.3s;
          }
        }
        
        .el-checkbox__label {
          padding-left: 8px;
          white-space: nowrap;
          font-size: 12px;
          color: var(--el-text-color-secondary);
          transition: all 0.3s;
        }
      }
      
      .agreement-text {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        
        .text {
          color: #666;
          transition: all 0.3s;
        }
        
        :deep(.link-btn) {
          padding: 0 2px;
          height: auto;
          font-size: 12px;
          font-weight: normal;
          color: var(--el-color-primary);
          text-decoration: none;
          transition: all 0.3s;
          
          &:hover {
            color: var(--el-color-primary-light-3);
            opacity: 1;
          }
          
          &:active {
            color: var(--el-color-primary-dark-2);
          }
        }
      }
      
      &.shake-animation {
        animation: shake 0.3s ease-in-out;
        will-change: transform;
        
        :deep(.el-checkbox) {
          .el-checkbox__label {
            color: var(--el-color-danger) !important;
          }
          
          .el-checkbox__input {
            .el-checkbox__inner {
              border-color: var(--el-color-danger) !important;
            }
          }
        }
        
        .agreement-text {
          .text {
            color: var(--el-color-danger) !important;
          }
          
          :deep(.link-btn) {
            color: var(--el-color-danger) !important;
            
            &:hover {
              color: var(--el-color-danger-light-3) !important;
            }
            
            &:active {
              color: var(--el-color-danger-dark-2) !important;
            }
          }
        }
      }
    }
    
    .submit-btn {
      width: 100%;
      height: 44px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      margin-top: 8px;
      background: rgba(var(--el-color-primary-rgb), 0.8);
      border: none;
      backdrop-filter: blur(4px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      letter-spacing: 1px;
      
      &:hover:not(.is-loading) {
        background: rgba(var(--el-color-primary-rgb), 0.9);
        transform: translateY(-1px);
        box-shadow: 
          0 4px 12px rgba(var(--el-color-primary-rgb), 0.2),
          0 2px 6px rgba(var(--el-color-primary-rgb), 0.1);
      }
      
      &:active {
        transform: translateY(0);
      }
      
      &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
        background: var(--el-color-primary);
        
        &:hover {
          transform: none;
          background: var(--el-color-primary);
        }
      }
    }
  }
  
  .other-login {
    .divider {
      position: relative;
      text-align: center;
      margin: 32px 0 24px;
      
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: calc(50% - 80px);
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
      }
      
      &::before {
        left: 0;
      }
      
      &::after {
        right: 0;
      }
      
      span {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.5);
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0 12px;
      }
    }
    
    .social-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
      
      .social-btn {
        width: 44px;
        height: 44px;
        transition: all 0.3s;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        
        .icon {
          width: 24px;
          height: 24px;
          transition: transform 0.3s;
        }
        
        &:hover {
          transform: translateY(-2px);
          
          .icon {
            transform: scale(1.1);
          }
        }
        
        &.wechat {
          background: rgba(7, 193, 96, 0.8);
          
          &:hover {
            background: rgba(7, 193, 96, 0.9);
            box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
          }
        }
        
        &.qq {
          background: rgba(18, 183, 245, 0.8);
          
          &:hover {
            background: rgba(18, 183, 245, 0.9);
            box-shadow: 0 4px 12px rgba(18, 183, 245, 0.3);
          }
        }
        
        &:disabled {
          cursor: not-allowed;
          opacity: 0.7;
          
          &:hover {
            transform: none;
            
            .icon {
              transform: none;
            }
          }
        }
      }
    }
  }
  
  .footer {
    margin-top: 40px;
    text-align: center;
    color: rgba(0, 0, 0, 0.4) !important;
    font-size: 12px;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.3;
  }
}

.agreement-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
  }
  
  .agreement-content {
    line-height: 1.6;
    color: var(--el-text-color-regular);
    
    h3 {
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
    
    p {
      margin-bottom: 12px;
    }
  }
  
  .dialog-footer {
    padding-top: 16px;
  }
}

@media (max-width: 480px) {
  .login-card {
    width: 100%;
    max-width: 360px;
    padding: 30px 20px;
    
    .login-form {
      .options-row {
        .remember-forget {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          
          .action-links {
            width: 100%;
            justify-content: flex-end;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .animated-background {
    .gradient-blob {
      width: 120%;
      height: 120%;
      
      &:nth-child(1) { animation-duration: 15s; }
      &:nth-child(2) { animation-duration: 18s; }
      &:nth-child(3) { animation-duration: 20s; }
      &:nth-child(4) { animation-duration: 22s; }
    }
  }
}

// 添加抖动动画
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

// 添加波浪线动画
@keyframes waveLine {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
</style> 